<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Netty WebSocket 聊天实例</title>
</head>
<script src="jquery.min.js" type="text/javascript"></script>
<script src="map.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        var uuid = 112; // uuid在一个会话唯一
        var nameOnline = ''; // 上线姓名
        var onlineName = new Map(); // 已上线人员, <requestId, name>

        $("#name").attr("disabled", "disabled");
        $("#onlineBtn").attr("disabled", "disabled");
        $("#downlineBtn").attr("disabled", "disabled");

        $("#banana").hide();

        // 初始化websocket
        var socket;
        if (!window.WebSocket) {
            window.WebSocket = window.MozWebSocket;
        }
        if (window.WebSocket) {
            socket = new WebSocket("ws://localhost:9090/");
            socket.onmessage = function (event) {
                console.log("收到服务器消息:" + event.data);
                if (event.data.indexOf("isSucc") != -1) {// 这里需要判断是客户端请求服务端返回后的消息（response）
                    var response = JSON.parse(event.data);
                    if (response != undefined && response != null) {
                        if (response.serviceId == 1001) { // 上线
                            if (response.isSucc) {
                                // 上线成功，初始化已上线人员
                                onlineName.clear();
                                $("#showOnlineNames").empty();
                                for (var reqId in response.hadOnline) {
                                    onlineName.put(reqId, response.hadOnline[reqId]);
                                }
                                initOnline();

                                $("#name").attr("disabled", "disabled");
                                $("#onlineBtn").attr("disabled", "disabled");
                                $("#downlineBtn").removeAttr("disabled");
                                $("#banana").show();
                            } else {
                                alert("上线失败");
                            }
                        } else if (response.serviceId == 1004) {
                            if (response.isSucc) {
                                onlineName.clear();
                                $("#showBanana").empty();
                                $("#showOnlineNames").empty();
                                $("#name").removeAttr("disabled");
                                $("#onlineBtn").removeAttr("disabled");
                                $("#downlineBtn").attr("disabled", "disabled");
                                $("#banana").hide();
                            } else {
                                alert("下线失败");
                            }
                        }
                    }
                } else {// 还是服务端向客户端的请求（request）
                    var request = JSON.parse(event.data);
                    if (request != undefined && request != null) {
                        if (request.serviceId == 1001 || request.serviceId == 1004) { // 有人上线/下线
                            if (request.serviceId == 1001) {
                                onlineName.put(request.requestId, request.name);
                            }
                            if (request.serviceId == 1004) {
                                onlineName.removeByKey(request.requestId);
                            }

                            initOnline();
                        } else if (request.serviceId == 1003) { // 有人发消息
                            appendBanana(request.name, request.message);
                        }
                    }
                }
            };
            socket.onopen = function (event) {
                $("#name").removeAttr("disabled");
                $("#onlineBtn").removeAttr("disabled");
                console.log("已连接服务器");
                var name = $("#name").val();
                if (name == null || name == '') {
                    alert("请输入您的尊姓大名");
                    return;
                }

                nameOnline = name;
                // 上线
                send(JSON.stringify({"requestId": uuid, "serviceId": 1001, "name": name}));
            };
            socket.onclose = function (event) { // WebSocket 关闭
                console.log("WebSocket已经关闭!");
                alert("WebSocket已经关闭!");
            };
            socket.onerror = function (event) {
                console.log("WebSocket异常!");
                alert("WebSocket异常!");
            };
        } else {
            alert("抱歉，您的浏览器不支持WebSocket协议!");
        }

        // WebSocket发送请求
        function send(message) {
            if (!window.WebSocket) {
                return;
            }
            if (socket.readyState == WebSocket.OPEN) {
                socket.send(message);
            } else {
                console.log("WebSocket连接没有建立成功!");
                alert("您还未连接上服务器，请刷新页面重试");
            }
        }

        // 刷新上线人员
        function initOnline() {
            $("#showOnlineNames").empty();
            for (var i = 0; i < onlineName.size(); i++) {
                $("#showOnlineNames").append('<tr><td>' +  onlineName.element(i).key  + '</td>' +
                        '<td>' + onlineName.element(i).value + '</td>' +
                        '</tr>');
            }
        }

        // 追加聊天信息
        function appendBanana(name, message) {
            $("#showBanana").append('<tr><td>' + name + ': ' + message + '</td></tr>');
        }

        //上线
        $("#onlineBtn").bind("click", function () {
            var name = $("#name").val();
            if (name == null || name == '') {
                alert("请输入您的尊姓大名");
                return;
            }

            nameOnline = name;
            // 上线
            send(JSON.stringify({"requestId": uuid, "serviceId": 1001, "name": name}));
        });

        //下线
        $("#downlineBtn").bind("click", function () {
            // 下线
            send(JSON.stringify({"requestId": uuid, "serviceId": 1004}));
        });

        //发送消息
        $("#sendBtn").bind("click", function () {
            var message = $("#messageInput").val();
            if (message == null || message == '') {
                alert("请输入您的聊天信息");
                return;
            }

            var sendId = "kf1"
            // 发送聊天消息
            if (sendId == 0) {
                send(JSON.stringify({"requestId": uuid, "serviceId": 1002, "name": nameOnline, "message": message}));
            } else {
                send(JSON.stringify({"requestId": uuid, "serviceId": 10021, "name": nameOnline, "message": message,"sendId": sendId}));
            }
            $("#messageInput").val("");
        });

    });

    function guid() {
        function S4() {
            return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
        }

        return (S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4());
    }
</script>
<body>
<h1>Netty WebSocket 聊天实例</h1>
<input type="text" id="name" value="用户2" placeholder="姓名"/>
<input type="button" id="onlineBtn" value="上线"/>
<input type="button" id="downlineBtn" value="下线"/>
<hr/>
<table id="banana" border="1">
    <tr>
        <td width="600" align="center">聊天</td>
        <td width="100" align="center">上线人员</td>
    </tr>
    <tr height="200" valign="top">
        <td>
            <table id="showBanana" border="0" width="600">
                <!--
                <tr>
                  <td>张三: 大家好</td>
                </tr>
                <tr>
                  <td>李四: 欢迎加入群聊</td>
                </tr>
                -->
            </table>
        </td>
        <td>
            <table id="showOnlineNames" border="0">
                <!--
                <tr>
                  <td>1</td>
                  <td>张三</td>
                <tr/>
                <tr>
                  <td>2</td>
                  <td>李四</td>
                <tr/>
                -->
            </table>
        </td>
    </tr>
    <tr height="40">
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td>
            <input type="text" id="messageInput" style="width:590px" placeholder="巴拉巴拉点什么吧"/>
        </td>
        <td>
            <input type="button" id="sendBtn" value="发送"/>
        </td>
    </tr>
</table>

</body>
</html>